import { Spinner } from '@blueprintjs/core'
import personalized from 'apis/personalized'
import useAsyncFn from 'hooks/useAsyncFn'
import React, { memo, useEffect } from 'react'
import MusicItem from './MusicItem'
import styles from './style.module.css'
const LatestMusic = memo(() => {
  const [state, getPersonalizedNewMusicFn] = useAsyncFn(personalized.getPersonalizedNewMusic)
  const { value = [], loading } = state
  useEffect(() => {
    getPersonalizedNewMusicFn()
  }, [])
  return (
    <div className={styles.root}>
      {loading ? (
        <Spinner />
      ) : (
        <div className={styles.content}>
          <div className={styles.block}>
            {value.slice(0, 5).map((v, i) => (
              <MusicItem key={v.id} {...v} index={i} />
            ))}
          </div>
          <div className={styles.block}>
            {value.slice(5, 10).map((v, i) => (
              <MusicItem key={v.id} {...v} index={i + 5} />
            ))}
          </div>
        </div>
      )}
    </div>
  )
})
export default LatestMusic
